<template>
  <div class="page">
    <!-- 左图片列表 -->
    <div class="left" ref="left">
      <img
          class="img"
          v-for="(item, index) in leftList"
          :key="index"
          :src="item"
      />
    </div>
    <!-- 右图片列表 -->
    <div class="right" ref="right">
      <img
          class="img"
          v-for="(item, index) in rightList"
          :key="index"
          :src="item"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "app-water-flow",
  components:{},
  data() {
    return {
      imgList: [
        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
        "https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        "https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img2.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
        "https://t7.baidu.com/it/u=1415984692,3889465312&fm=193&f=GIF",
        "https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF",
        "https://t7.baidu.com/it/u=3713375227,571533122&fm=193&f=GIF",
        "https://t7.baidu.com/it/u=2235903830,1856743055&fm=193&f=GIF",
        'https://t7.baidu.com/it/u=1635608122,693552335&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=1856946436,1599379154&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=813347183,2158335217&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=2084624597,235761712&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=3337661019,3898256580&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=1723458001,3671360301&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=2359570649,2574326109&fm=193&f=GIF'
      ], // 所有图片
      leftList: [], // 左边列图片
      rightList: [], // 右边列图片
      leftHeight: 0, // 左边列高度
      rightHeight: 0, // 右边列高度
      columnWidth: 0, // 列宽度

      // 动态控制几列
      columnList: [],
      columnCount:3,
    }
  },
  created() {
    // 初始化数据
    for (let i = 0; i < this.columnCount; i++) {
      // 生成每列图片数组
      this.columnList.push([]);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.columnWidth = this.$refs.left.clientWidth;
      console.log('columnWidth:', this.columnWidth)
      this.setWaterFallLayout();
      // this.setWaterFallLayout2();
    });
  },
  methods:{
    // 方法1 无需等待图片真实渲染完成在比较高度；但是需要获取图片真实宽高
    async setWaterFallLayout() {
      for (let item of this.imgList) {
        let img = new Image();
        img.src = item;
        try{
          // 图片渲染后高度
          let h = await this.getImgHeight(img);
          // 左边列比右边低，图片放入左边
          if (this.leftHeight <= this.rightHeight) {
            this.leftList.push(item);
            this.leftHeight += h;
          } else {
            // 否则，图片放入右边
            this.rightList.push(item);
            this.rightHeight += h;
          }
        } catch(e) {
          console.log(e)
        }
      }
    },

    // 获取图片高度
    getImgHeight(img) {
      return new Promise((resolve,reject) => {
        // 图片加载完成
        img.onload = () => {
          // 计算图片渲染后高度
          let h = (img.height / img.width) * this.columnWidth;
          resolve(h);
        };
        // 加载出错
        img.onerror=()=>{
          reject('error')
        }
      });
    },

    // 方法2：直接通过图片父级元素高度（列div）来判断哪一列最低 需要等待图片真实渲染完成在获取高
    async setWaterFallLayout2() {
      for (let item of this.imgList) {
        if (this.$refs.left.clientHeight <= this.$refs.right.clientHeight) {
          // 左边列比右边低，图片放入左边
          this.leftList.push(item);
        } else {
          //否则图片放入右边
          this.rightList.push(item);
        }
        // 关键点：等待渲染完成后重新比较左右高度
        await this.$nextTick();
      }
    },
  }
}
</script>

<style scoped>
.page {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: 10px;
  box-sizing: border-box;
}
.left,
.right {
  margin: 0 9px 0 0;
  width: 50%;
  /*width: 48%;*/
}

.left {
  margin-right: 9px;
}

.right {
  margin-right: 0;
}

.img {
  width: 100%;
  height: auto;
  margin-bottom: 0;
  border-radius: 5px;
}
</style>
